<template>
    <div class="login-wrapper">
        <div class="login">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
                <el-form-item label="" prop="mobile">
                    <div class="form-item">
                        <el-input v-model="ruleForm.mobile" maxlength="11"></el-input>
                        <div class="send-code" @click="sendCodeHandle">发送验证码</div>
                    </div>
                </el-form-item>
                <el-form-item label="" prop="smsCode">
                    <div class="form-item">
                        <el-input v-model="ruleForm.smsCode"></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="" style="margin-bottom: 0">
                    <div class="form-item noborder">
                        <el-button style="width: 100%" @click="loginHandleFake">伪登录</el-button>
                        <el-button type="primary" style="width: 100%" @click="loginHandle">登录</el-button>
                    </div>

                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ruleForm: {
                mobile: '17610018888',
                smsCode: '123456'
            },
            rules: {
                mobile: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                ],
                smsCode: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        sendCodeHandle() {
            if (!/^1\d{10}$/.test(this.ruleForm.mobile)) {
                this.$message.info('请输入正确的手机号')
                return
            }
            this.$axios.post('/platform-user/api/partner/sendSmsCode', { mobile: this.ruleForm.mobile }).then(() => { })
        },
        loginHandle() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.$axios.post('/platform-user/api/partner/register', { mobile: this.ruleForm.mobile, smsCode: this.ruleForm.smsCode }).then(res => {
                        this.$router.push('/')
                        this.$store.dispatch('user/setToken', res.token)
                        this.$store.dispatch('user/setUserInfo', res)
                    })
                } else {
                    return false;
                }
            });
        },
        loginHandleFake() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.$router.push('/')
                    this.$store.dispatch('user/setToken', 'faafafagetqgggaeetetrt')
                    this.$store.dispatch('user/setUserInfo', { mobile: this.ruleForm.mobile })
                } else {
                    return false;
                }
            });
        }
    }
}
</script>
<style lang="scss">
.login-wrapper {
    height: 100vh;
    .login {
        width: 400px;
        padding: 40px;
        box-sizing: border-box;
        background: #ffffff;
        box-shadow: 0px 6px 34px 0px rgba(16, 17, 111, 0.12);
        border-radius: 4px;
        position: absolute;
        left: calc(50vw - 200px);
        top: 100px;

        .form-item {
            border-bottom: 1px solid #efefef;
            display: flex;
            &.noborder {
                border-bottom: none;
            }
            .send-code {
                width: 100px;
                cursor: pointer;
            }
            .el-input__inner {
                border: none;
            }
        }
    }
}
</style>